<template>
  <div>
    <div class="constellation"><span @click="back"><van-icon name="arrow-left" />返回</span> 请选择你的星座</div>
    <ul class="ul_for">
      <li v-for="(item,index) in list" :key="index" @click="onclick(item.id)"><img :src=item.src alt=""></li>
    </ul>
    <div class="box" v-show="aaa">
      <h3>{{object.title}}</h3>
      <div class="for_box">
        <div>
          <span>{{object.luckycolor}}</span>
            <p>幸运颜色</p>
        </div>
        <div>
          <span>{{object.luckynumber}}</span>
          <p>幸运数字</p>
        </div>
        <div>
          <span>{{object.luckyconstellation}}</span>
          <p>速配星座</p>
        </div>
        <div>
          <p>短评:{{object.shortcomment}}</p>
        </div>
      </div>
      <div>
        <h3>今日运势</h3>
       <ul class="prog">
         <li>
           <progress :value="object.fortune.all" max="5"></progress>
           <span>{{(object.fortune.all)/5*100}}</span><i>%</i>
           <p>综合</p>
         </li>
         <li>
           <progress :value="object.fortune.love" max="5"></progress>
           <span>{{(object.fortune.love)/5*100}}</span><i>%</i>
           <p>爱情</p>
         </li>
         <li>
           <progress :value="object.fortune.work" max="5"></progress>
           <span>{{(object.fortune.work)/5*100}}</span><i>%</i>
           <p>学业</p>
         </li>
         <li>
           <progress :value="object.fortune.money" max="5"></progress>
           <span>{{(object.fortune.money)/5*100}}</span><i>%</i>
           <p>财富</p>
         </li>
        <li>
          <progress :value="health" max="100"></progress>
          <span>{{object.index.health}}</span>
          <p>健康</p>
        </li>
        <li>
          <progress :value="discuss" max="100"></progress>
          <span>{{object.index.discuss}}</span>
          <p>商谈</p>
        </li>
       </ul>
        <h3>运势解析</h3>
        <ul class="ccc">
          <li><h4>综合运势</h4>
            <p>{{object.fortunetext.all}}</p>
          </li>
          <li><h4>爱情运势</h4>
            <p>{{object.fortunetext.love}}</p></li>
          <li><h4>学业工作</h4><p>{{object.fortunetext.work}}</p></li>
          <li><h4>财富运势</h4><p>{{object.fortunetext.money}}</p></li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import {getConstellation} from "@/http/api";

export default {
name: "Constellation",
  data(){
    return{
      aaa:false,
      health:'',
      discuss:'',
      src:'',
      object:{
        fortune:'',
        fortunetext:'',
        index:'',
        luckycolor:''
      },
      list:[
          {id:'aries',
        src:require('../assets/白羊.jpg')},
        {id:'taurus',
          src:require('../assets/金牛.jpg')},
        {id:'gemini',
          src:require('../assets/双子.jpg')},
        {id:'cancer',
          src:require('../assets/巨蟹.jpg')},
        {id:'leo',
          src:require('../assets/狮子.jpg')},
        {id:'virgo',
          src:require('../assets/处女.jpg')},
        {id:'libra',
          src:require('../assets/天秤.jpg')},
        {id:'scorpio',
          src:require('../assets/天蝎.jpg')},
        {id:'sagittarius',
          src:require('../assets/射手.jpg')},
        {id:'capricorn',
          src:require('../assets/摩羯.jpg')},
        {id:'aquarius',
          src:require('../assets/水瓶.jpg')},
        {id:'pisces',
          src:require('../assets/双鱼.jpg')}
      ]
    }
  },
  created() {

  },
  methods:{
    onclick(id){
      this.aaa=true
      getConstellation(id).then(res=>{
        console.log(res)
        this.object=res.data.data
        this.health=Number(res.data.data.index.health.replace('%')[0])*10
        this.discuss=Number(res.data.data.index.discuss.replace('%')[0])*10
      })
    },
    back(){
      this.$router.back()
    }
  }
}
</script>

<style scoped lang="less">
.ccc{
  padding: 25px 0;
  background-color: #f4f4f4;
  >li{
    margin: 0 auto 25px;
    padding: 10px;
    width: 90%;
    background-color: white;
    border-radius: 15px;
  }
}
.box{
  padding: 0 10px;
}
h3{
  font-weight: 700;
}
.constellation{
  color: white;
  padding: 20px 0;
  text-align: center;
  font-weight: 500;
  font-size: 20px;
  background-image: url('../assets/背景.jpg');
  position: relative;
  >span {
    position: absolute;
    left: 15px;
    top:22px;
    font-size: 18px;
  }
}
.ul_for{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  >li{
    padding-top: 10px;
    width: 30%;
    >img{
      width: 100%;
    }
  }
}
.for_box{
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  margin-bottom: 10px;
  >div:nth-of-type(1){
    background: linear-gradient(to bottom,#f2e7ff,#f5f1ff 30%,#f2e7ff);
    >span{
      color: #a772d8;
    }
    >p{
      color: #a772d8;
      font-weight: 700;
    }
  }
  >div:nth-of-type(2){
    background: linear-gradient(to bottom,#d8eeff,#e6f7ff 30%,#d5edff);
    >span{
      font-size: 30px;
      color: #4ab3e3;
    }
    >p{
      color: #4ab3e3;
      font-weight: 700;
    }
  } >div:nth-of-type(3){
    background: linear-gradient(to bottom,#ffecd0,#fff4e8 30%,#ffecd0);
    >span{
      color: #f4b276;
    }
    >p{
      color: #f4b276;
      font-weight: 700;
    }
  }>div:nth-of-type(4){
     background: linear-gradient(to bottom,#e7faea,#ecffef 30%,#e1f8e5);
           width: 100%;
           height: 50px;
      line-height: 0px;
  margin-top: 10px;
    >p{
      color: #f4b276;
      font-weight: 700;
    }
  }
  >div{
    width: 30%;
    text-align: center;
    padding-top: 20px;
    border-radius: 10px;
    >span{
      display: inline-block;
      width: 61px;
      height: 61px;
      text-align: center;
      line-height: 61px;
      background-color: white;
      border-radius: 50%;
    }
    >P{
      padding-top: 5px;
    }
  }
}
.prog{
  height: 180px;
  display: flex;
  justify-content: space-evenly;
  >li{
    padding-top: 60px;
    width: 8%;
    overflow: hidden;
  }
}
progress{
  height: 16px;
  width: 80px;
  margin-bottom: 25px;
  transform:rotate(-90deg);
  transform-origin: 28% bottom;
  //track-color: red;
  background: rgba(255,255,255,0);
  border-radius: 20px;
}
/deep/ progress::-webkit-progress-bar {
  background-color: #f4f4f4;
  border-radius: 8px;
}
/deep/ progress::-webkit-progress-value {
  //background: #06c5d8;
  background: linear-gradient(0,#f76c9b,#ffa1c1);
  border-radius: 8px;
}

</style>